<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>咩语</title>
  <link href="//cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
  <link rel="dns-prefetch" href="//lab.sangsir.com">
  <link rel="dns-prefetch" href="//source.unsplash.com">
  <script src="//cdn.bootcss.com/native-promise-only/0.8.1/npo.js"></script>
  <script src="//cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    body {
      overflow: hidden;
      background-color: #f5f5f5;
    }

    .bg {
      position: fixed;
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    main {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-image: url("//source.unsplash.com/random/540x960");
      justify-content: flex-end;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }

    .title {
      color: #ffffff;
      font-size: 32px;
    }

    .sub-title {
      color: #ffffff;
      font-size: 14px;
      margin-top: 6px;
    }

    .text-container {
      width: 100%;
      padding-left: 18px;
      padding-right: 18px;
      background: linear-gradient(transparent, #333333) left repeat;
      padding-top: 96px;
      padding-bottom: 72px;
      object-fit: contain;
      display: flex;
      flex-direction: column;
    }
  </style>
</head>

<body>

  <!-- <img src="" alt="" class="bg"> -->
  <main>
    <div class="text-container">
      <span class="title" id="J_Title">正在加载中…</span>
      <span class="sub-title" id="J_SubTitle">《咩语》</span>
    </div>
  </main>

  <script>
    var date = new Date()
    var year = date.getFullYear().toString().slice(2)
    var month = (date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)
    var day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
    var time = year + '.' + month + '.' + day

    document.getElementById('J_SubTitle').innerText = time + ' --《咩语》'

    fetch('//lab.sangsir.com/api/sentence.php')
      .then(function (response) {
        return response.text()
      })
      .then(function (data) {
        document.getElementById('J_Title').innerText = data
      })
  </script>

  <script>
    document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
      ':35729/livereload.js?snipver=1"></' + 'script>')
  </script>
</body>

</html>